<!--
 * daterange yyyy-MM-dd
-->

<template>
  <el-date-picker
    :clearable="false"
    v-model="inputVal"
    :disabled="isReadonly"
    @change="change"
    :type="config.type"
    value-format="yyyy-MM-dd"
    :placeholder="isReadonly ? '' : `请选择${config.name}`"
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
  >
  </el-date-picker>
</template>
<script>
export default {
  props: {
    isReadonly: {
      type: Boolean,
      default: false,
    },
    formData: {
      type: Object,
      default: () => Object.create(null),
    },
    config: {
      type: Object,
      default: () => Object.create(null),
    },
  },
  data() {
    return {
      inputVal: null,
      endTime: "",
      startTime: "",
    };
  },
  computed: {
    curVal() {
      return this.formData[this.config.prop] || "";
    },
    curEndTimeVal() {
      return this.formData[this.config.endTime] || "";
    },
    curStartTimeVal() {
      return this.formData[this.config.startTime] || "";
    },
  },
  watch: {
    curEndTimeVal: {
      immediate: true,
      deep: true,
      handler(val) {
        if (!val) {
          this.inputVal = null;
        }
      },
    },
    curVal: {
      immediate: true,
      deep: true,
      handler(val) {
        this.inputVal = val;
      },
    },
  },
  methods: {
    change(val) {
      this.inputVal = val;
      if (this.config.prop && !this.config.startTime) {
        this.formData[this.config.prop] = val;
        this.$emit("update:formData", this.formData);
        this.$emit("change");
      } else if (this.config.endTime && this.config.startTime) {
        this.formData[this.config.startTime] = `${val[0]} 00:00:00`;
        this.formData[this.config.endTime] = `${val[1]} 23:59:59`;
        this.$emit("update:formData", this.formData);
        this.$emit("change");
      }
    },
  },
  created() {},
};
</script>
<style lang="scss" scoped></style>
